{% extends "base.html" %}

{% block title %}架构方案详情{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2 class="mb-3">架构方案详情</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('main.architecture_list') }}">系统架构</a></li>
                    <li class="breadcrumb-item active">{{ architecture.name }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!-- 基本信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">基本信息</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-3"><strong>方案名称：</strong></div>
                        <div class="col-md-9">{{ architecture.name }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-3"><strong>所属项目：</strong></div>
                        <div class="col-md-9">
                            <a href="{{ url_for('main.project_detail', project_id=architecture.project.id) }}">
                                {{ architecture.project.name }}
                            </a>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-3"><strong>架构类型：</strong></div>
                        <div class="col-md-9">
                            {% if architecture.architecture_type == 'centralized' %}集中式
                            {% elif architecture.architecture_type == 'distributed' %}分布式
                            {% elif architecture.architecture_type == 'hybrid' %}混合式
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-3"><strong>方案描述：</strong></div>
                        <div class="col-md-9">{{ architecture.description or '暂无描述' }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-3"><strong>更新时间：</strong></div>
                        <div class="col-md-9">{{ architecture.updated_at.strftime('%Y-%m-%d %H:%M') }}</div>
                    </div>
                </div>
            </div>

            <!-- 系统拓扑 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">系统拓扑</h5>
                </div>
                <div class="card-body">
                    {% if architecture.topology %}
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>节点名称</th>
                                    <th>节点类型</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for node in architecture.topology %}
                                <tr>
                                    <td>{{ node.name }}</td>
                                    <td>{{ node.type }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">暂无拓扑信息</p>
                    {% endif %}
                </div>
            </div>

            <!-- 系统组件 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">系统组件</h5>
                </div>
                <div class="card-body">
                    {% if architecture.components %}
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>组件名称</th>
                                    <th>组件类型</th>
                                    <th>配置参数</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for component in architecture.components %}
                                <tr>
                                    <td>{{ component.name }}</td>
                                    <td>{{ component.type }}</td>
                                    <td>{{ component.config or '-' }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">暂无组件信息</p>
                    {% endif %}
                </div>
            </div>

            <!-- 通信方式 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">通信方式</h5>
                </div>
                <div class="card-body">
                    {% if architecture.communication %}
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>协议名称</th>
                                    <th>协议类型</th>
                                    <th>协议参数</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for protocol in architecture.communication %}
                                <tr>
                                    <td>{{ protocol.name }}</td>
                                    <td>{{ protocol.type }}</td>
                                    <td>{{ protocol.params or '-' }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted mb-0">暂无通信配置信息</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- 操作面板 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">操作面板</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if current_user.role in ['engineer', 'manager'] and 
                              (current_user.role == 'manager' or architecture.project.creator_id == current_user.id) %}
                        <a href="{{ url_for('main.edit_architecture', architecture_id=architecture.id) }}" 
                           class="btn btn-primary">
                            <i class="fas fa-edit me-1"></i>编辑方案
                        </a>
                        <button type="button" class="btn btn-danger" 
                                onclick="confirmDelete('{{ architecture.id }}', '{{ architecture.name|e }}')">
                            <i class="fas fa-trash-alt me-1"></i>删除方案
                        </button>
                        {% endif %}
                        <a href="{{ url_for('main.architecture_list') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>返回列表
                        </a>
                    </div>
                </div>
            </div>

            <!-- 创建信息 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">创建信息</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4"><strong>创建者：</strong></div>
                        <div class="col-md-8">{{ architecture.creator.full_name or architecture.creator.username }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"><strong>创建时间：</strong></div>
                        <div class="col-md-8">{{ architecture.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认对话框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content bg-light">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>确认删除
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-dark mb-0">
                    <strong>您确定要删除以下架构方案吗？</strong><br>
                    方案名称：<span id="architectureName" class="fw-bold"></span><br>
                    <small class="text-danger">
                        <i class="fas fa-exclamation-circle me-1"></i>此操作不可恢复！
                    </small>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>取消
                </button>
                <form id="deleteForm" method="post" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash-alt me-1"></i>确认删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(architectureId, architectureName) {
    document.getElementById('architectureName').textContent = architectureName;
    document.getElementById('deleteForm').action = "{{ url_for('main.delete_architecture', architecture_id=0) }}".replace('0', architectureId);
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
{% endblock %} 